<template>

  <div>
    <h1>和：{{ sum }}</h1>
    <button @click="sum++">点击+1</button>
  </div>

</template>

<script>

import {
  ref,
  reactive,
  watch,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  name: "demo04",
  setup() {
    console.log('-----setup--------')
    let sum = ref(0)

    //通过组合式API的影视区使用生命周期钩子
    onBeforeMount(() => {
      console.log('-----onBeforeMount--------')
    })
    onMounted(() => {
      console.log('-----onMounted--------')
    })
    onBeforeUpdate(() => {
      console.log('-----onBeforeUpdate--------')
    })
    onUpdated(() => {
      console.log('-----onUpdated--------')
    })
    onBeforeUnmount(() => {
      console.log('-----onBeforeUnmount--------')
    })
    onUnmounted(() => {
      console.log('-----onUnmounted--------')
    })

    return {
      sum
    }
  },
  //通过配置项的影视使用生命周期钩子
  /*beforeCreate() {
    console.log('-----beforeCreate-----')
  },
  created() {
    console.log('-----created(-----')
  },
  beforeMount() {
    console.log('-----beforeMount-----')
  },
  mounted() {
    console.log('-----mounted-----')
  },
  beforeUpdate() {
    console.log('-----beforeUpdate-----')
  },
  updated() {
    console.log('-----updated-----')
  },
  beforeUnmount() {
    console.log('-----beforeUnmount-----')
  },
  unmounted() {
    console.log('-----unmounted-----')
  },
  beforeDestroy() { //废弃
    console.log('-----beforeDestroy-----')
  },
  destroyed() {//废弃
    console.log('-----destroyed-----')
  }*/
}
</script>

<style scoped>

</style>